<template>
  <div>
    <solt v-if="tree">
      <el-tree-select
        v-model="chanValue"
        :data="options"
        :multiple="props.multiple"
        :filterable="props.filterable"
        :allow-create="props.allowCreate"
        :placeholder="props.placeholder"
        :disabled="props.disabled"
        :size="props.size"
        :clearable="props.clearable"
        :collapse-tags="props.collapseTags"
        :collapse-tags-tooltip="props.collapseTagsTooltip"
        :multiple-limit="props.multipleLimit"
        :effect="props.effect"
        :autocomplete="props.autocomplete"
        :reserve-keyword="props.reserveKeyword"
        :default-first-option="props.defaultFirstOption"
        :automatic-dropdown="props.automaticDropdown"
        :fit-input-width="props.fitInputWidth"
        :tag-type="props.tagType"
        :placement="props.placement"
        :checkStrictly="props.checkStrictly"
        @change="change"
        @visible-change="visibleChange"
        @remove-tag="removeTag"
        @clear="clear"
        @blur="blur"
        @focus="focus"
      ></el-tree-select>
    </solt>
    <solt v-else-if="icon">
      <el-popover :visible="visible" placement="bottom" :width="360">
        <div style="text-align: right; margin: 0">
          <div class="icon-list">
            <ul class="demo-icon-list">
              <li
                v-for="(icon, num) in icons"
                :key="num"
                class="icon-item"
                @click="changeIcon(icon.key)"
              >
                <span class="demo-svg-icon">
                  <el-icon>
                    <component :is="icon.key" />
                  </el-icon>
                  <!-- <span class="icon-name">{{ icon.key }}</span> -->
                </span>
              </li>
            </ul>
          </div>
        </div>
        <template #reference>
          <el-input
            v-model="chanValue"
            placeholder="选择图标"
            :prefix-icon="chanValue"
            @focus="iconfocus"
            @blur="iconblur"
            readonly
          />
        </template>
      </el-popover>
    </solt>
    <solt name="select" v-else>
      <el-select
        v-model="chanValue"
        :multiple="props.multiple"
        :filterable="props.filterable"
        :allow-create="props.allowCreate"
        :placeholder="props.placeholder"
        :disabled="props.disabled"
        :size="props.size"
        :clearable="props.clearable"
        :collapse-tags="props.collapseTags"
        :collapse-tags-tooltip="props.collapseTagsTooltip"
        :multiple-limit="props.multipleLimit"
        :effect="props.effect"
        :autocomplete="props.autocomplete"
        :reserve-keyword="props.reserveKeyword"
        :default-first-option="props.defaultFirstOption"
        :automatic-dropdown="props.automaticDropdown"
        :fit-input-width="props.fitInputWidth"
        :tag-type="props.tagType"
        :placement="props.placement"
        @change="change"
        @visible-change="visibleChange"
        @remove-tag="removeTag"
        @clear="clear"
        @blur="blur"
        @focus="focus"
      >
        <el-option
          v-for="item in props.options"
          :key="item[val]"
          :value="item[val]"
          :label="item[lab]"
          :disabled="item.disabled"
        />
      </el-select>
    </solt>
  </div>
</template>

<script setup>
import { ref, toRef, computed, onBeforeUpdate } from 'vue';
import yu_select from '@/pub/yu-select.js';
import * as iconAll from '@element-plus/icons-vue';
let icons = [];
for (const iconName in iconAll) {
  icons.push({ key: iconName });
}
const visible = ref(false);
const iconfocus = () => {
  visible.value = true;
};
const iconblur = () => {
  visible.value = false;
};
const changeIcon = key => {
  chanValue.value = key;
};
//树状重新封装数据 增加 lab val 自定义字段 label value
onBeforeUpdate(() => {
  if (props.tree) {
    debugger;
    let val = props.val;
    let lab = props.lab;
    disabledTree(props.options, lab, val);
    console.log(props.options);
  }

  //获取菜单字典树状下拉
  function disabledTree(arr, lab, val) {
    arr.forEach(el => {
      el.value = el[val];
      el.label = el[lab];
      disabledTree(el.children || [], lab, val);
    });
  }
});
//默认值取配置中
const props = defineProps({
  //默认数据显示
  lab: { type: String, default: yu_select.select.displayName },
  //默认数据有效值
  val: { type: String, default: yu_select.select.displayValue },
  //树状结构下拉
  tree: { type: Boolean, default: false },
  //选择下拉
  select: { type: Boolean, default: false },
  //图标
  icon: { type: Boolean, default: false },
  //值
  value: { type: String, default: '' },
  //默认显示 占位显示
  placeholder: { type: String, default: yu_select.select.placeholder },
  //数据集 数组显示
  options: { type: Array, default: [] },
  //是否多选
  multiple: { type: Boolean, default: yu_select.select.multiple },
  //是否禁用
  disabled: { type: Boolean, default: yu_select.select.disabled },
  //输入框尺寸
  size: { type: String, default: yu_select.select.size },
  //是否可以清空选项
  clearable: { type: Boolean, default: yu_select.select.clearable },
  //多选时是否将选中值按文字的形式展示
  collapseTags: { type: Boolean, default: yu_select.select.collapseTags },
  //当鼠标悬停于折叠标签的文本
  collapseTagsTooltip: {
    type: Boolean,
    default: yu_select.select.collapseTagsTooltip,
  },
  //选择数量
  multipleLimit: { type: Number, default: yu_select.select.multipleLimit },
  //Tooltip 主题
  effect: { type: String, default: yu_select.select.effect },
  //autocomplete 属性
  autocomplete: { type: String, default: yu_select.select.autocomplete },
  //是否筛选
  filterable: { type: Boolean, default: yu_select.select.filterable },
  //是否允许用户创建新条目
  allowCreate: { type: Boolean, default: yu_select.select.allowCreate },
  //选项后保留当前的搜索关键词
  reserveKeyword: { type: Boolean, default: yu_select.select.reserveKeyword },
  //是否在输入框按下回车时，选择第一个匹配项
  defaultFirstOption: {
    type: Boolean,
    default: yu_select.select.defaultFirstOption,
  },
  //automaticDropdown
  automaticDropdown: {
    type: Boolean,
    default: yu_select.select.automaticDropdown,
  },
  //自定义清除图标
  clearIcon: { type: Boolean, default: yu_select.select.clearIcon },
  //宽度是否与输入框相同
  fitInputWidth: { type: Boolean, default: yu_select.select.fitInputWidth },
  //自定义后缀图标组件
  suffixIcon: { type: Boolean, default: yu_select.select.suffixIcon },
  //标签类型		success/info/warning/danger
  tagType: { type: Boolean, default: yu_select.select.tagType },
  //下拉框出现的位置
  placement: { type: String, default: yu_select.select.placement },
  //树状结构 非末级节点是否能选择
  checkStrictly: { type: Boolean, default: yu_select.tree.checkStrictly },
});
// 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
const chanValue = computed({
  get: () => props.value,
  set: val => {
    emits('update:value', val);
  },
});
const emits = defineEmits(['update:value']);

//change回调
const change = value => {
  emits('change', value);
};
//下拉框出现/隐藏时触发
const visibleChange = value => {
  emits('visibleChange', value);
};
//多选模式下移除tag时触发
const removeTag = value => {
  emits('removeTag', value);
};
//可清空的单选模式下用户点击清空按钮时触发
const clear = value => {
  emits('clear', value);
};
//当 input 失去焦点时触发
const blur = value => {
  emits('blur', value);
};
//当 input 获得焦点时触发
const focus = value => {
  emits('focus', value);
};
</script>
<style lang="scss" scoped>
.icon-list {
  width: 100%;
  height: 400px;
  overflow-y: auto;
}
.icon-name {
  padding-top: 2px;
}
.demo-icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid var(--el-border-color);
  border-left: 1px solid var(--el-border-color);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.icon-item {
  cursor: pointer;
  text-align: center;
  color: var(--el-text-color-regular);
  height: 40px;
  font-size: 10px;
  border-right: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
  transition: background-color var(--el-transition-duration);
  :hover {
    background-color: #f5f7fa;
  }
}
.demo-svg-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  // cursor: pointer;
}
.el-icon {
  --color: inherit;
  height: 2em;
  width: 2em;
  line-height: 2em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;
  svg {
    height: 2em;
    width: 2em;
  }
}
</style>
